<style lang="less">
@import "../../assets/css/config.less";
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent!important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px @white inset !important;
}
.el-icon-loading.ivu-icon::before{
  width: 10px;
  height: 10px;
}
#refindpass .ivu-card-body li {
  margin-left: 0!important;
}
</style>
<style lang="less" scoped>
@import "../../assets/css/config.less";
.bak{
  position: absolute;
  width: 100%;
  bottom: 0;
}

#refindpass {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  Microsoft YaHei, SimSun, sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @header-bgc;
}
.bg {
  position: absolute;
}
.form {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  text-align: center;
  margin-top: 150px;
  p {
    font-size: 30px;
  }
}
.loading-button{
  display: flex;
  justify-content: center;
  align-items: center;
}
.button{
  margin-top: 5px;
  line-height: 24px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  // margin: 15px 0 0;
  width: 100%;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 5px;
  background-color: @color1;
  box-shadow: none;
}
.button:hover{
  background-color: @color2;
  box-shadow: none;
  color: @white
}
.button:active{
  background-color: @color3;
  box-shadow: none;
  color: @white
}
.loading{
  width: 16px;
  height: 16px;
  animation: mymove 2s linear 0s infinite normal none;
}
@keyframes mymove
{
	from {transform: rotateZ(0deg);}
	to {transform: rotateZ(360deg);}
}

</style>
<template>
  <div id="refindpass">
    <Row type="flex" justify="center">
      <Col span="5">
        <Card class="form">
          <div slot="title">涅槃之路</div>
          <Form ref="formInline" :model="formInline" :rules="ruleInline" @submit.native.prevent>
            <!-- <FormItem prop="username">
              <Input
                type="text"
                v-model="formInline.username"
                placeholder="用户名"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <Icon slot="prepend" type="ios-person-outline" />
              </Input>
            </FormItem> -->
            <FormItem prop="schoolName">
              <Select style="text-align:left" size="large" v-model="formInline.schoolName" placeholder="请选择您的学校名称" label-position="left">
                <Option value="北京邮电大学">北京邮电大学</Option>
                <Option value="else">其他</Option>
              </Select>
            </FormItem>
            <FormItem v-if="formInline.schoolName==='else'" prop="schoolName2">
              <Input
                type="text"
                v-model="formInline.schoolName2"
                placeholder="请输入您的学校名称"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="stuNo">
              <Input
                type="text"
                v-model="formInline.stuNo"
                placeholder="学号"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-person-outline" /> -->
              </Input>
            </FormItem>
           
            <FormItem>
              <Button class="button" @click="handleSubmit('formInline', formInline)">
                <div class="loading-button">
                  找回密码/用户名
                  <img v-if="loadingFlag" src="../../assets/loading.png" class="loading" alt="">
                </div>
              </Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row class="bak" type="flex" justify="center">
      <a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号: 京ICP备17048321号</a>
    </Row>
  </div>
</template>
<script>
import { refindPassword } from "../../api/api";
export default {
  name: "refindPass",
  data() {
    return {
      formInline: {
        schoolName: "",
        schoolName2: "",
        stuNo: ""
      },
      
      ruleInline: {
        stuNo: [{ required: true, message: "请输入学号", trigger: "change" }],
        schoolName: [
          { required: true, message: "请选择您的学校名称", trigger: "change" }
        ],
        schoolName2: [
          { required: true, message: "请输入您的学校名称", trigger: "change" }
        ]
      },
      loadingFlag: false
    };
  },
  methods: {
    
    handleSubmit(name, form) {
      let that = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          this.loadingFlag = true;
          let realSchoolName = ''
          if(form.schoolName==="else"){
            realSchoolName = form.schoolName2;
          } else {
            realSchoolName = form.schoolName;
          }
          refindPassword({
            stuNo: this.formInline.stuNo,
            schoolName: realSchoolName
            // username: this.formInline.username
          }).then(response => {
            if(response.state === true) {
              if(response.emailflag) {
                this.loadingFlag = false;
                this.$Message.success('您的用户名和密码已发送到您的邮箱')
                that.$router.push({
                  name: "login"
                });
              } else {
                this.$alert(
                  `<p>您的账号信息找回成功，用户名是<strong> ${ response.username }</strong>，新密码是<strong> ${ response.newpassword }</strong> ，为了您的账号安全，请尽快绑定邮箱！！！</p>`, 
                  '密码重置成功', 
                  { dangerouslyUseHTMLString: true }
                )
                .then(() => {
                  this.$store.commit("del_token");
                  that.$router.push({
                    name: "login"
                  });
                });
              }
            } else {
              this.loadingFlag = false;
              this.$Message.error(response.msg);
            }
          }).catch(error => {
            this.loadingFlag = false;
            this.$Message.error('找回密码失败');
          });
        }
      })
    },
  }
};
</script>
